import React, { useState, useEffect } from 'react';
import { DatePicker, Radio } from 'antd';
import moment from 'moment';
import { isEqual, size } from 'lodash';
import styles from './index.less';

/**
 *
 * @param {Number} num 输入的数字，比如0代表今天,-1代表昨天
 * @param {*} isStringDate 是否输出字符串数组
 * @param {*} stringDateFormat 字符串数组日期格式化，默认YYYY-MM-DD
 */
const numberToRangeDate = (num, isStringDate = false, stringDateFormat = 'YYYY-MM-DD') => {
    if (num || num === 0) {
        const selectVal = Number(num);
        const startDate = moment();
        const endDate = moment();

        // 日期往前计算
        if (selectVal < 0) {
            if (selectVal === -1) {
                endDate.subtract(1, 'days'); // 昨天
                startDate.subtract(1, 'days');
            } else {
                startDate.subtract(Math.abs(selectVal) - 1, 'days');
            }
        }
        if (isStringDate === true) {
            return [startDate.format(stringDateFormat), endDate.format(stringDateFormat)];
        }
        return [startDate, endDate];
    }
    return [];
};

// 快捷日期
const RADIO_OPTIONS = [
    { label: '今天', value: 0 },
    { label: '昨天', value: -1 },
    { label: '近七天', value: -7 },
    { label: '近30天', value: -30 }
];

// 带快捷选择的日期范围
const QuickRangeDate = React.forwardRef(({ value, onChange }, ref) => {
    const [dateValue, setDateValue] = useState();
    const [quickDateValue, setQuickDateValue] = useState();

    useEffect(() => {
        setDateValue(value);
    }, [value]);

    // 日期控件值变化
    const handleDateChange = e => {
        setDateValue(e);
    };

    // 快捷日期选择
    const handleQuickDateChange = e => {
        const arr = numberToRangeDate(e.target.value);
        setDateValue(arr);
    };

    // 监听值变化选中快捷方式
    useEffect(() => {
        if (size(dateValue) > 0) {
            const tempStringDate = [dateValue[0].format('YYYY-MM-DD'), dateValue[1].format('YYYY-MM-DD')];
            let dateEqual = null;
            for (let i = 0; i < RADIO_OPTIONS.length; i += 1) {
                const dateString = numberToRangeDate(RADIO_OPTIONS[i].value, true);
                if (isEqual(tempStringDate, dateString)) {
                    dateEqual = RADIO_OPTIONS[i].value;
                    break;
                }
            }
            setQuickDateValue(dateEqual);
        } else {
            setQuickDateValue(null);
        }
    }, [dateValue]);

    useEffect(() => {
        if (dateValue && onChange) {
            onChange(dateValue);
        }
    }, [dateValue, onChange]);

    return (
        <div className={styles.quickRangeDateWrapper} ref={ref}>
            <DatePicker.RangePicker value={dateValue} onChange={handleDateChange} />
            <Radio.Group value={quickDateValue} onChange={handleQuickDateChange} buttonStyle="solid">
                {RADIO_OPTIONS.map(item => (
                    <Radio.Button value={item.value} key={item.value}>
                        {item.label}
                    </Radio.Button>
                ))}
            </Radio.Group>
        </div>
    );
});

export default QuickRangeDate;
